import React, { useRef } from "react";
import { ProTable, ActionType } from "@ant-design/pro-components";
import { Avatar, message, Popconfirm, Popover, Select, Tag } from "antd";
import { useRequest } from "ahooks";
import { userV1AdminControllerIndex, userV1AdminControllerUpdate } from "@/services/auto/userAdmin";
import { blue, green, orange } from "@ant-design/colors";
import { completeImgUrl } from "common/utils/utils";
import { userTitleCertification } from "common/utils/data";
import { getDateTimeWithRangeSearch } from "@/utils/protable-column";

export default function User(){
  const actionRef = useRef<ActionType>();

  const {run: patchUsersRun} = useRequest(userV1AdminControllerUpdate,{
    manual: true,
    onSuccess: ()=>{
      actionRef.current?.reload();
      message.success('操作成功');
    }
  })

  return <ProTable<API.UserAdminIndexResult, API.UserV1AdminControllerIndexParams>
    actionRef={actionRef}
    rowKey="uuid"
    pagination={{
      showSizeChanger: true,
      showTotal: (total: number, [start, end]: [number, number]) =>
        `第 ${start}-${end} 条/总共 ${total} 条`,
    }}
    toolBarRender={() => []}
    options={false}
    request={(param) => {
      const {
        current,
        pageSize,
        name,
        mobile,
        createTimeStart,
        createTimeEnd,
      } = param;
      return userV1AdminControllerIndex({
        pageSize,
        pageIndex: current,
        name,
        mobile,
        createTimeStart,
        createTimeEnd,
      }).then((res) => {
        return {
          success: true,
          data: res.list,
          total: res.total,
        };
      });
    }}
    columns={[
      {
        align: 'center',
        title: '头像',
        dataIndex: 'avatar',
        render: (val) => {
          return <Avatar src={completeImgUrl(val as string)} alt="头像" />;
        },
        hideInSearch: true,
      },
      {
        align: 'center',
        title: '手机',
        dataIndex: 'mobile',
      },
      {
        align: 'center',
        title: '昵称',
        dataIndex: 'name',
      },
      {
        align: 'center',
        title: '头衔',
        dataIndex: 'title',
        hideInSearch: true,
      },
      {
        align: 'center',
        title: '头衔认证',
        dataIndex: 'titleCertification',
        hideInSearch: true,
        render: (val, record) => {
          return (
            <Popover
              content={
                <>
                  <Select
                    style={{ width: '200px' }}
                    value={record.titleCertification}
                    onChange={(value) => {
                      patchUsersRun({uuid: record.uuid}, { titleCertification: value });
                    }}
                    options={userTitleCertification.$listSelect}
                  />
                </>
              }
              title="编辑头衔认证"
              trigger="click"
            >
              <Tag color={blue.primary} style={{ cursor: 'pointer' }}>
                {userTitleCertification[record.titleCertification]}
              </Tag>
            </Popover>
          );
        },
      },
      {
        align: 'center',
        title: '个性签名',
        dataIndex: 'signature',
        hideInSearch: true,
      },
      {
        align: 'center',
        title: '状态',
        dataIndex: 'status',
        render: (val, record) => {
          return (
            <>
              <Popconfirm
                disabled={record.id === 1}
                title={
                  val ? '禁用该用户吗？会将该用户强制登出' : '启用该用户吗？'
                }
                okText="确定"
                cancelText="取消"
                onConfirm={() => {
                  patchUsersRun({uuid: record.uuid},{ status: val === 1 ? 0 : 1 });
                }}
              >
                <Tag
                  color={val ? green.primary : orange.primary}
                  style={{ cursor: 'pointer' }}
                >
                  {val ? '启用中' : '禁用中'}
                </Tag>
              </Popconfirm>
            </>
          );
        },
        hideInSearch: true,
      },
      ...getDateTimeWithRangeSearch({
        title: '注册时间',
        dataIndex: 'createTime',
      })
    ]}
  />
}
